import { Layout, List, Card, Button } from 'antd';
import Head from 'next/head';
import Link from 'next/link';
import { SiteLayout } from '@/components/Layout';
import { selectScreen } from '@/modules/store';
import { setTheme } from '@/modules/global';

import { GetServerSideProps, InferGetServerSidePropsType } from 'next';
import type { Data as ApiCategoryList } from '@/pages/api/post/getCat';
import { request } from '@/components/server/utils/request';
import { useDispatch, useSelector } from 'react-redux';

export default function Home({
  data,
}: InferGetServerSidePropsType<typeof getServerSideProps>) {
  const globalScreen = useSelector(selectScreen);
  const dispath = useDispatch();
  return (
    <>
      <Head>
        <link
          rel="shortcut icon"
          type="image/x-icon"
          href="https://unpkg.byted-static.com/latest/byted/arco-config/assets/favicon.ico"
        />
        <title>{'microtf'}</title>
      </Head>

      <>
        {/* <Link href="/" locale="en-US">
          en
        </Link>
        <Link href="/" locale="zh-CN">
          CN
        </Link>
        <Button onClick={() => dispath(setTheme({ theme: 'light' }))}>
          设置
        </Button>
        <Button onClick={() => dispath(setTheme({ theme: 'dark' }))}>
          设置
        </Button>
        <Button onClick={() => dispath(setTheme({ theme: 'system' }))}>
          清理
        </Button> */}
        <Layout>
          <Layout.Content
            style={{ padding: '0 auto auto auto', minHeight: 280 }}
          >
            <List
              dataSource={data.categories}
              grid={{
                gutter: 16,
                column: globalScreen.column,
              }}
              renderItem={(item) => (
                <List.Item>
                  <Card
                    title={
                      <Link
                        href={{
                          pathname: '/blog/category/[id]/[page]',
                          query: { id: item.cat, page: 1 },
                        }}
                      >
                        {item.cat}
                      </Link>
                    }
                  >
                    <List
                      dataSource={item.posts}
                      renderItem={(item2) => (
                        <List.Item>
                          <Link
                            href={{
                              pathname: '/blog/view/[id]',
                              query: { id: item2.post.id },
                            }}
                          >
                            {item2.post.title}
                          </Link>
                        </List.Item>
                      )}
                    ></List>
                  </Card>
                </List.Item>
              )}
            ></List>
          </Layout.Content>
        </Layout>
      </>
    </>
  );
}
Home.Layout = SiteLayout;
export const getServerSideProps: GetServerSideProps<{
  data: ApiCategoryList;
}> = async (context) => {
  return request<ApiCategoryList>('/api/post/getCat', {
    method: 'post',
    withCookie: context.req.cookies,
  })
    .then((result) => {
      return { props: { data: { ...result } } };
    })
    .catch((err) => {
      console.error(err);
      return { notFound: true };
    });
};
